<template>
    <div id="MapList">
      <header class="header">
        <div class="title">
          <img src="../../assets/images/01_11.png" alt="" class="img_zuo" @click="back" />
          <div>{{title}}</div>
          <!--<span class="btn-add" @click="addNew">+</span>
          <img src="../../assets/images/big.png" alt="" class="btn-search" @click="search" />-->
        </div>
      </header>
      <div class="main">
        <div class="ditu">
        	<div id="ditu"></div>
        </div>

      </div>
      <Tabbar></Tabbar>
    </div>
</template>
<script>
import { Dialog } from 'vant';
import Tabbar from "../tabbar.vue";
export default {
    name: "mode_map",
    data(){
        return{
          map:null,
          list:[],
          typeObj:{},
          markerList:[],
          xqda_params:null,
          type_webview:null,
          title:''
        }
    },
    components: {
      Tabbar
    },
    created(){
      this.title = localStorage.getItem('Title')
    },
    methods:{
      back(){
        //this.$router.push(this.xqda_params.path);
        this.$router.back()
      },
      getType(){
        var _this = this;

        if(_this.xqda_params.cx_type=='jzw'){
          var _list = [
            {mc:'住宅',id:1},
            {mc:'商用',id:2},
            {mc:'商住混合',id:3},
            {mc:'其他',id:4}
          ];
          _this.createTypeWebview(_list);
          return;
        }else if(_this.xqda_params.cx_type=='jxmd'){
          var _list = [
            {mc:'小商场',id:1},
            {mc:'小医院',id:2},
            {mc:'小餐饮场所',id:3},
            {mc:'小旅馆',id:4},
            {mc:'小歌舞厅娱乐场所',id:5},
            {mc:'小网吧',id:6},
            {mc:'小美容洗浴场所',id:7},
            {mc:'小生产加工企业',id:8},
            {mc:'废品回收',id:9},
            {mc:'其他',id:10}
          ];
          _this.createTypeWebview(_list);
          return;
        }else if(_this.xqda_params.cx_type=='qy'){
          var _list = [
            {mc:'企业',id:1}
          ];
          _this.createTypeWebview(_list);
          return;
        }

        //查询住改非用途
        var url = _this.$global_msg.Url.host + "/queryFile/selectYt";
        var params = {};
        _this.axios.get(url,{
        	params: params
        }).then(function (data) {
          console.log('查询弹框列表:',data);
          if(data&&data.data){
            if(data.data.code===0){
              _this.createTypeWebview(data.data.rows);
            }else{
              _this.$toast(data.data.msg);
            }
          }else{
            _this.$toast('查询失败');
          }
        }).catch(error => {
          _this.$terminal._error(error);
        });
      },
      createTypeWebview(_list){
        var _this = this;
        var typeObj = {};
        var maxleng = 0;
        var mcnum = 0;
        for(var n=0;n<_list.length;n++){
          var obj = _list[n];
          obj.type_img_id = n+1;
          if(obj.mc){
            //目前只给了10种颜色
            //超过的类别不知道用什么颜色
            //所以就限制了最大只显示10个
            if(mcnum>=10){
              continue;
            }
            mcnum++;
            typeObj[obj.id] = obj;
            if(obj.mc.length>=maxleng){
              maxleng = obj.mc.length;
            }
          }
        }
        _this.typeObj = typeObj;
        var typeObjJSON = JSON.stringify(typeObj);
        /*var w = 60;
        if(maxleng>2){
          w = w + (maxleng-2)*25;
        }
        var h = 60;
        if(mcnum>0){
          h = h + mcnum*45;
        }
        console.log('type.html?typeObj='+typeObjJSON)
        console.log(w)
        console.log(h);*/
        //console.log('type.html?typeObj='+typeObjJSON);
        var _rem = window.screen.width/10;
        var _bottom = _rem*2;
        _this.type_webview = plus.webview.create('webview/type.html?typeObj='+typeObjJSON, 'type', {
          bottom: _bottom+'px',left: '20px', width: '90px', height: '375px', position: 'absolute', scrollIndicator: 'none', background: 'transparent'
          // zindex:3
        });
        _this.type_webview.addEventListener('titleUpdate', function(e){
          console.log('Update title: '+e.title);
          _this.init(e.title);
        }, false);
        plus.webview.currentWebview().append(_this.type_webview);
      },
      getListObjMc(name,key){//根据id获取列表对象的名称
        var cqxz = [
            {mc:'住宅',id:1},
            {mc:'商用',id:2},
            {mc:'商住混合',id:3},
            {mc:'其他',id:4}
        ];
        var xfqk = [
            {mc:'正常',id:1},
            {mc:'部分设施缺失但能正常供水',id:2},
            {mc:'不能正常供水',id:3}
        ];
        var lb = [
          {mc:'小商场',id:1},
          {mc:'小医院',id:2},
          {mc:'小餐饮场所',id:3},
          {mc:'小旅馆',id:4},
          {mc:'小歌舞厅娱乐场所',id:5},
          {mc:'小网吧',id:6},
          {mc:'小美容洗浴场所',id:7},
          {mc:'小生产加工企业',id:8},
          {mc:'废品回收',id:9},
          {mc:'其他',id:10}
        ];
        var result = '';
        var list = [];
        if(name=='cqxz'){
          list = cqxz;
        }else if(name=='xfqk'){
          list = xfqk;
        }else if(name=='lb'){
          list = lb;
        }

        for(var n=0;n<list.length;n++){
          if(list[n].id===key){
            result = list[n].mc;
          }
        }
        return result;
      },
      //初始化
      init(type){
        var _this = this;
        try{
          plus.nativeUI.showWaiting("正在加载...");
        }catch(e){
          console.log(e.message);
        }
        var url = '';
        if(_this.xqda_params.cx_type=='zgf'){//住改非
          if(_this.xqda_params.path=='/tj_tu_4'){
            url = _this.$global_msg.Url.host + "/QueryStatisticalRatio/selectLongitudeAndLatitudeByDwId";
          }else{
            url = _this.$global_msg.Url.host + "/zgfinfo/findZgfinfoListByMultiConditions";
          }
        }else if(_this.xqda_params.cx_type=='jzw'){//建筑物
          if(_this.xqda_params.path=='/jzw_tj_tu'){
            url = _this.$global_msg.Url.host + "/total/selectConstructionsMoreAndMore";
          }else{
            url = _this.$global_msg.Url.host + "/construction/selectConstructionByExample";
          }
        }else if(_this.xqda_params.cx_type=='jxmd'){//九小门店
          if(_this.xqda_params.path=='/jxmd_tj_tu'){
            url = _this.$global_msg.Url.host + "/total/selectLongitudeAndLatitudeByDwId";
          }else{
            url = _this.$global_msg.Url.host + "/nineStore/selectNineStroeByExample";
          }
        }else if(_this.xqda_params.cx_type=='qy'){//企业
          if(_this.xqda_params.path=='/qiye_ti_tu'){
            url = _this.$global_msg.Url.host + "/enterprise/selectEnterpriseMoreAndMore";
          }else{
            url = _this.$global_msg.Url.host + "/enterprise/selectEnterpriseByVague";
          }

        }
        _this.axios.get(url,{
        	params: _this.xqda_params.cs_cx
        }).then(function (data) {
          console.log('返回:',data);
          if(data&&data.data){
            if(data.data.code==0){
              for(var n=0;n<data.data.rows.length;n++){
                var obj = data.data.rows[n];
                // data.data.rows[n].dz = '';
                // data.data.rows[n].xq = '';
                // data.data.rows[n].jzmc = '';
                // data.data.rows[n].dw = '';
                // data.data.rows[n].qymc = '';
                // data.data.rows[n].yt = '';
                // data.data.rows[n].cqxz = '';
                // data.data.rows[n].cs = '';
                // data.data.rows[n].lb = '';
                if(_this.xqda_params.cx_type=='zgf'){
                  if(_this.xqda_params.path=='/tj_tu_4'){
                    var dz = obj.dizhi;
                    data.data.rows[n].dz = dz;
                    data.data.rows[n].xq = obj.xq;
                    data.data.rows[n].yt = obj.yt;
                  }else{
                    var dz = obj.dizhi;
                    data.data.rows[n].dz = dz;
                    data.data.rows[n].xq = obj.xq;
                    data.data.rows[n].yt = obj.yt;
                  }
                }else if(_this.xqda_params.cx_type=='jzw'){
                  if(_this.xqda_params.path=='/jzw_tj_tu'){
                    data.data.rows[n].jwd = obj.map;
                    data.data.rows[n].dz = obj.address;
                    data.data.rows[n].jzmc = obj.name;
                    data.data.rows[n].cqxz = _this.getListObjMc('cqxz',obj.property_nature);
                    data.data.rows[n].cs = obj.floorNum;
                  }else{
                    data.data.rows[n].jwd = obj.map;
                    data.data.rows[n].dz = obj.address;
                    data.data.rows[n].jzmc = obj.name;
                    data.data.rows[n].cqxz = _this.getListObjMc('cqxz',obj.propertyNature);
                    data.data.rows[n].cs = obj.floornum;
                  }
                }else if(_this.xqda_params.cx_type=='jxmd'){
                  if(_this.xqda_params.path=='/jxmd_tj_tu'){
                    data.data.rows[n].jwd = obj.map;
                    data.data.rows[n].dz = obj.address;
                    data.data.rows[n].dw = obj.dw_mc;
                    data.data.rows[n].lb = _this.getListObjMc('lb',obj.type);
                  }else{
                    data.data.rows[n].jwd = obj.map;
                    data.data.rows[n].dz = obj.address;
                    data.data.rows[n].dw = obj.dwMc;
                    data.data.rows[n].lb = _this.getListObjMc('lb',obj.type);
                  }
                }else if(_this.xqda_params.cx_type=='qy'){
                  if(_this.xqda_params.path=='/qiye_ti_tu'){
                    data.data.rows[n].dz = obj.enterpriseAddress;
                    data.data.rows[n].qymc = obj.enterpriseName;
                    if(obj.longitude&&obj.latitude){
                      data.data.rows[n].jwd = obj.longitude+','+obj.latitude;
                    }else{
                      data.data.rows[n].jwd = '';
                    }
                  }else{
                    data.data.rows[n].dz = obj.enterpriseAddress;
                    data.data.rows[n].qymc = obj.enterpriseName;
                    if(obj.longitude&&obj.latitude){
                      data.data.rows[n].jwd = obj.longitude+','+obj.latitude;
                    }else{
                      data.data.rows[n].jwd = '';
                    }
                  }
                }
              }
              data.data.rows = data.data.rows.filter(function(element, index, array) {
                if(type&&type!=='默认'){
                  if(_this.xqda_params.cx_type=='zgf'){
                    return element.ytid==type;
                  }else if(_this.xqda_params.cx_type=='jzw'){
                    if(_this.xqda_params.path=='/jzw_tj_tu'){
                      return element.property_nature==type;
                    }else{
                      return element.propertyNature==type;
                    }
                  }else if(_this.xqda_params.cx_type=='jxmd'){
                    return element.type==type;
                  }else if(_this.xqda_params.cx_type=='qy'){
                    return true;
                  }
                }else{
                  return true;
                }
              })
              _this.list = data.data.rows;
              var inter = setInterval(function(){
                if(_this.map){
                  clearInterval(inter);
                  _this.BiaoDian();
                }
              },100);
            }else{
              _this.$toast(data.data.msg);
            }
          }else{
            _this.$toast('查询失败');
          }

          try{
            plus.nativeUI.closeWaiting();
          }catch(e){
            console.log(e.message);
          }
        }).catch(error => {
          _this.$terminal._error(error);
        });
      },
      getMap(){
        try{
          var _this = this;
          _this.map = new plus.maps.Map("ditu");
          _this.map.setZoom(15);
          _this.map.showZoomControls(true); //显示缩放控件
          var jd = _this.$global_msg.centerJwd.jd;
          var wd = _this.$global_msg.centerJwd.wd;
          var pcenter = new plus.maps.Point(jd, wd); // 地图中心点
          console.log('中心点:',pcenter);
          // 设置地图的中心点和缩放级别
          _this.map.setCenter(pcenter);

          document.documentElement.style.height = '100%';
          document.documentElement.style.overflow = 'hidden';
          document.body.style.height = '100%';
          document.body.style.overflow = 'hidden';
        }catch(e){
          console.log(e.message);
        }
      },
      BiaoDian(){
        var _this = this;
        for(var n=0;n<_this.markerList.length;n++){
          _this.map.removeOverlay(_this.markerList[n]);
        }
        _this.markerList = [];
        var num = 0;
        for(var n=0;n<_this.list.length;n++){
          var jd = '';
          var wd = '';
          if(_this.list[n].jwd&&_this.list[n].jwd!='0'){
            console.log(_this.list[n].jwd);
            jd = _this.list[n].jwd.split(',')[0];
            wd = _this.list[n].jwd.split(',')[1];
          }else{
            continue;
          }
          var dizhi = _this.list[n].dizhi;
          var point = new plus.maps.Point(jd, wd);
          if(num<1){
            _this.map.setCenter(point);
          }
          num++;
          var marker = new plus.maps.Marker(point);

          var type_img_id = '';
          if(_this.xqda_params.cx_type=='zgf'){
            type_img_id = _this.typeObj[_this.list[n].ytid]?_this.typeObj[_this.list[n].ytid].type_img_id:1;
          }else if(_this.xqda_params.cx_type=='jzw'){
            if(_this.xqda_params.path=='/jzw_tj_tu'){
              type_img_id = _this.typeObj[_this.list[n].property_nature]?_this.typeObj[_this.list[n].property_nature].type_img_id:1;
            }else{
              type_img_id = _this.typeObj[_this.list[n].propertyNature]?_this.typeObj[_this.list[n].propertyNature].type_img_id:1;
            }
          }else if(_this.xqda_params.cx_type=='jxmd'){
            type_img_id = _this.typeObj[_this.list[n].type]?_this.typeObj[_this.list[n].type].type_img_id:1;
          }else if(_this.xqda_params.cx_type=='qy'){
            type_img_id = 1;
          }
          marker.setIcon("/static/mark_"+type_img_id+".png");
          marker.setDraggable(false);
          //marker.setLabel(dizhi);
          //var bubble = new plus.maps.Bubble(dizhi);
          //marker.setBubble(bubble);
          _this.map.addOverlay(marker);
          marker.dataObj = _this.list[n];
          _this.markerList.push(marker);
          //_this.list[n].marker_uuid = marker._UUID_;
          marker.onclick = function (target) {
          	console.log( "Clicked:",target);
            var w = window.screen.width
            var h = window.screen.height
            console.log(w)
            console.log(h)

            var url = 'webview/huaban.html?cx_type='+_this.xqda_params.cx_type;
            url += '&xq='+target.dataObj.xq;
            url += '&jzmc='+target.dataObj.jzmc;
            url += '&dw='+target.dataObj.dw;
            url += '&qymc='+target.dataObj.qymc;
            url += '&dz='+target.dataObj.dz;
            url += '&yt='+target.dataObj.yt;
            url += '&cqxz='+target.dataObj.cqxz;
            url += '&cs='+target.dataObj.cs;
            url += '&lb='+target.dataObj.lb;

            console.log(url)
            //target.setIcon("/static/biaodian_dw.png");
            var d = plus.webview.create(url, 'sub', {
              top: '0px', width: w + "px", height: h + 'px', position: 'absolute', scrollIndicator: 'none', background: 'transparent'
              // zindex:3
            });
            d.addEventListener('titleUpdate', function(e){
              console.log('Update title: '+e.title);
              if(e.title=='跳转'){
                //target.setIcon("/static/biaodian.png");
                d.close();
                _this.xqda_params.xq_id = target.dataObj.id//详情id
                _this.xqda_params.from = '/mode_map';//详情返回路径
                localStorage.setItem("xqda_params",JSON.stringify(_this.xqda_params));
                if(_this.xqda_params.cx_type=='zgf'){
                  _this.$router.push("/zgf_see");
                }else if(_this.xqda_params.cx_type=='jzw'){
                  _this.$router.push("/jzw_see");
                }else if(_this.xqda_params.cx_type=='jxmd'){
                  _this.$router.push("/jxmd_see");
                }else if(_this.xqda_params.cx_type=='qy'){
                  _this.$router.push("/qy_see");
                }

              }else if(e.title=='关闭'){
                //target.setIcon("/static/biaodian.png");
                d.close();
              }
            }, false);
            plus.webview.currentWebview().append(d);
          }
        }
      },
      plusReady: function () {

      },
    },
    beforeCreate() {
      document.addEventListener("plusready", this.plusReady, false);
    },
    beforeRouteLeave(to, form, next) {
      console.log('关闭地图和相关物品');
      if(this.map){
        this.map.close();
      }
      if(this.type_webview){
        this.type_webview.close();
      }
      try{
        var _map = plus.maps.getMapById('ditu');
        if(_map){
          _map.close();
        }
        plus.webview.close("type");
        plus.webview.close("sub");
      }catch(e){
        //TODO handle the exception
      }
      Dialog.close();
      if(!(to.path=='/zgf_see'||to.path=='/jzw_see'||to.path=='/jxmd_see'||to.path=='/qy_see')){
        localStorage.removeItem('xqda_params');
      }
      document.documentElement.style.height = '100%';
      document.documentElement.style.overflow = 'auto';
      document.body.style.height = '100%';
      document.body.style.overflow = 'auto';
      next()
    },
    mounted() {
      var _this = this;
      this.xqda_params = localStorage.getItem("xqda_params")?JSON.parse(localStorage.getItem("xqda_params")):null;
      if(this.xqda_params){
        if(this.xqda_params.cx_type=='zgf'){
          if(this.xqda_params.title){
            this.title = this.xqda_params.title+'住改非';
          }else{
            this.title =  this.title + '住改非';
          }
        }else if(this.xqda_params.cx_type=='jzw'){
          if(this.xqda_params.title){
            this.title = this.xqda_params.title+'建筑物';
          }else{
            this.title =  this.title +'建筑物';
          }
        }else if(this.xqda_params.cx_type=='jxmd'){
          if(this.xqda_params.title){
            this.title = this.xqda_params.title+'九小门店';
          }else{
            this.title =  this.title +'九小门店';
          }
        }else if(this.xqda_params.cx_type=='qy'){
          if(this.xqda_params.title){
            this.title = this.xqda_params.title+'企业';
          }else{
            this.title =  this.title +'企业';
          }
        }else{
          this.title = '';
        }
      }else{
        this.title = '';
      }

      this.getMap();
      this.getType();
      //this.init();

      //物理返回
      // window.addEventListener("popstate", function(){
      //   _this.back();
      // }, false);
    },
}
</script>
<style scoped>
  #MapList{
    width: 100%;
    height: 100%;
    z-index: 40;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
  }
  .header {
    height: 1.8519rem;
    background: #007aff;
    padding-top: 0.8333rem;
    box-sizing: border-box;
    width: 100%;
    font-size: 0.388888rem;
    position: relative;
  }

  .title {
    padding: 0 0.3704rem;
    display: flex;
    align-items: center;
    color: #fff;
  }

  .title>div {
    width: 100%;
    font-size: 0.4444rem;
    text-align: center;
  }

  .img_zuo {
    width: 0.2593rem;
    height: 0.463rem;
  }
  .btn-search{
    position: absolute;
    right: 1.388888rem;
    bottom: 0.388888rem;
    width: 0.629629rem;
    height: 0.629629rem;
  }
  .btn-add{
    position: absolute;
    right: 0.37037rem;
    font-size: 1.111111rem !important;
  }

  .main {
    /*padding-top: 1.8519rem;*/
    /* height: 100vh; */
    box-sizing: border-box;
    background: #fff;
    padding-bottom: 1.662963rem;
    /* padding-top: 10.0008px; */
    flex: 1;
  }

  .ditu {
  	width: 100%;
  	height: 100%;
  	background: #FFFFFF;
  	display: flex;
  	overflow: hidden;
  	box-sizing: border-box;
  	flex-wrap: wrap;
    flex-direction: column;
  }
  #ditu {
  	width: 100%;
  	flex: 1;
  	background: #FFFFFF;
  }

  .lie_list {
  	width: 100%;
  	height: 8.3333rem;
  	background: #fff;
  	overflow: scroll;
  }

  .lie_list_item {
  	height: 1.37037rem;
  	border-bottom: 0.018518518518518517rem solid #f1f1f1;
    display: flex;
    align-items: center;
  }

  .lie_list_item .biaodian{
  	width: 0.416666rem;
    height: 0.648148rem;
    margin-left: 0.2778rem;
    margin-right: 0.185185rem;
  }
  .lie_list_item .name{
  	flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 0.388888rem;
  }
  .lie_list_item .type,.lie_list_item .mj{
  	width: 1.851851rem;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 0.388888rem;
  }
  .lie_list_item .dianhua{
  	width: 0.37037rem;
    height: 0.425925rem;
    margin-left: 0.185185rem;
    margin-right: 0.2778rem;
  }

  .head_right {
  	color: #fff;
  	position: absolute;
  	right: 0.3889rem;
  	top: 0.779rem;
  	height: 44px;
  	font-size: 0.4259rem;
  	line-height: 44px;
  }

  .lie_list_item_bg {
  	background: #2E5DFE;
  	color: #fff;
  }
</style>
